<template>
  <v-chart
    v-if="config && showChart"
    ref="chart"
    :style="{
      width: chartWidth + 'px',
      height: chartHeight + 'px',
    }"
    :option="option"
    @click="handleChartClick"
  />
</template>

<script setup>
// import vue apis
import { ref, computed, nextTick, watch, onMounted, onUnmounted, h } from "vue";

// import stores
import useFlowStore from "@/store/flow.js";
import useCommonStore from "@/store/common.js";

import Colors from "./Colors.js";

// import echarts
// import { use } from "echarts/core";
import * as echarts from "echarts/core";
import "echarts/lib/component/polar";
import { CanvasRenderer, SVGRenderer } from "echarts/renderers";
import {
  BarChart,
  LineChart,
  ScatterChart,
  EffectScatterChart,
} from "echarts/charts";
import {
  LegendComponent,
  TitleComponent,
  TooltipComponent,
  GridComponent,
  DatasetComponent,
  TransformComponent,
  PolarComponent,
} from "echarts/components";
import { LabelLayout, UniversalTransition } from "echarts/features";

// import vue echarts
import VChart, { THEME_KEY } from "vue-echarts";

echarts.use([
  CanvasRenderer,
  // SVGRenderer,
  BarChart,
  LineChart,
  ScatterChart,
  EffectScatterChart,
  LegendComponent,
  TitleComponent,
  TooltipComponent,
  GridComponent,
  DatasetComponent,
  TransformComponent,
  PolarComponent,
  LabelLayout,
  UniversalTransition,
]);

const props = defineProps({
  data: {
    type: Object,
    required: true,
  },
});

const showChart = ref(true);
const refresh = async () => {
  showChart.value = false;
  await nextTick();
  showChart.value = true;
};
defineExpose({ refresh });

const seriesData = computed(() => props.data);

const flowStore = useFlowStore();
const commonStore = useCommonStore();
const chartObject = ref("chart");
const config = computed(() => flowStore.chartConfig.southAirportsChart);

const staticConfig = {
  barOpacity: 0.9,
  itemStyle: {
    borderRadius: 8,
    borderColor: commonStore.darkMode
      ? "rgba(255,255,255,0.5)"
      : "rgba(0,0,0,0.3)",
    borderWidth: 2,
  },
  emphasisConfig: {
    disabled: false,
    // scale: true,
    // focus:'none',
    // focus: "self",
    focus: config.value.chartEmphasis ? "series" : "none",
  },
  labelConfig: {
    show: true,
    formatter: (item) => (item.value == 0 ? "" : item.value),
    color: commonStore.darkMode ? "#fff" : "#000",
    textBorderColor: commonStore.darkMode ? "#0006" : "#fff8",
    textBorderWidth: 1,
    textShadowColor: commonStore.darkMode ? "#000" : "#fff",
    textShadowBlur: 4,
    textShadowOffsetY: 1,
    fontSize: "14px",
    fontWeight: "bold",
  },
  barMinHeight: 20,
};

const chartWidth = computed(
  () => props.data.moment.length * config.value.chartSize + 120
);

const chartHeight = computed(() => commonStore.clientHeight - 179);

const computedSymbolSize = (value) => {
  if (config.value.chartType == "line") {
    return 4;
  } else {
    // return Math.max(value * 4, 12);
    return value * 4;
  }
};

const option = computed(() => {
  let res = seriesData.value;

  return {
    grid: {
      x: 40,
      y: 60,
      x2: 40,
      y2: 40,
    },
    tooltip: {
      show: true,
      trigger: "axis",
      axisPointer: { type: "cross" },
    },

    xAxis: { type: "category", data: res.scaleY },
    yAxis: [
      {
        id: 0,
        type: "value",
        name: "架次",
        position: "left",
        axisLine: { show: true },
      },
      {
        id: 1,
        type: "value",
        name: "扇区建议",
        position: "right",
        axisLine: { show: true },
        splitLine: { show: false },
        axisLabel: {
          formatter: "{value} 扇",
        },
      },
    ],
    series: [
      {
        name: "扇区建议",
        data: res.data.sector,
        type: "line",
        step: true,
        // smooth: true,
        yAxisIndex: 1,
        polarIndex: 1,
        emphasis: staticConfig.emphasisConfig,
        label: {
          show: true,
          color: commonStore.darkMode ? "#fff" : "#000",
          fontSize: "12px",
          fontWeight: "bold",
          formatter: "{c}扇",
          distance: 2,
          offset: [20, 0],
          rotate: 45,
          backgroundColor: commonStore.darkMode
            ? "rgba(0,0,0,0.5)"
            : "rgba(255,255,255,0.5)",
          borderColor: commonStore.darkMode ? "#fff" : "#000",
          borderWidth: 1,
          borderRadius: 12,
          padding: [4, 6, 2, 6],
        },
        lineStyle: {
          opacity: 1,
          color: commonStore.darkMode ? "#fff3" : "#0003",
          width: 10,
        },
        itemStyle: {
          color: commonStore.darkMode ? "#fff8" : "#0008",
        },
        symbol: "circle",
        symbolSize: 20,
        clip: false,
        animationDelay: function (idx) {
          return idx * 50 + 100;
        },
      },
      {
        name: "合计",
        data: res.data[flowStore.chartConfig.southAirportsChart.type].ALL,
        type: "line",
        yAxisIndex: 0,
        coordinateSystem: "cartesian2d",
        smooth: config.value.chartSmooth,
        emphasis: staticConfig.emphasisConfig,
        label: {
          show: true,
          color: commonStore.darkMode ? "#000" : "#FFF",
          textBorderColor: commonStore.darkMode
            ? "rgba(255,255,255,0.75)"
            : "rgba(0,0,0,0.75)",
          textBorderWidth: 2,
          fontSize: "16px",
          fontWeight: "bold",
          distance: 10,
        },
        lineStyle: {
          color: commonStore.darkMode
            ? Colors.TOTAL.darkColor
            : Colors.TOTAL.lightColor,
          // type: "dotted",
          // type: "dashed",
          opacity: config.value.showTotalLine ? 1 : 0,
          width: 3,
        },
        itemStyle: {
          color: "#ABB2B9",
        },
        clip: false,
        animationDelay: function (idx) {
          return idx * 50 + 100;
        },
      },
      flowStore.chartConfig.southAirportsChart.type !== "APP" &&
      flowStore.chartConfig.southAirportsChart.type !== "ZUYB"
        ? null
        : {
            name: "ZUYB起飞",
            data: res.data.ZUYB.DEP,
            barMinHeight: staticConfig.barMinHeight,
            type: config.value.chartType,
            smooth: config.value.chartSmooth,
            coordinateSystem: "cartesian2d",
            yAxisIndex: 0,
            stack: config.value.chartStack ? "x" : "",
            symbolSize: (value) => computedSymbolSize(value),
            rippleEffect: { brushType: "stroke" },
            label: staticConfig.labelConfig,
            emphasis: staticConfig.emphasisConfig,
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: commonStore.darkMode
                    ? Colors.ZUYB.DEP.darkColor[0]
                    : Colors.ZUYB.DEP.lightColor[0],
                },
                {
                  offset: 1,
                  color: commonStore.darkMode
                    ? Colors.ZUYB.DEP.darkColor[1]
                    : Colors.ZUYB.DEP.lightColor[1],
                },
              ]),
              opacity: staticConfig.barOpacity,
              ...staticConfig.itemStyle,
            },
            areaStyle: { opacity: 0.8 },
            animationDelay: function (idx) {
              return idx * 50 + 100;
            },
          },
      flowStore.chartConfig.southAirportsChart.type !== "APP" &&
      flowStore.chartConfig.southAirportsChart.type !== "ZUYB"
        ? null
        : {
            name: "ZUYB落地",
            data: res.data.ZUYB.ARR,
            barMinHeight: staticConfig.barMinHeight,
            type: config.value.chartType,
            smooth: config.value.chartSmooth,

            coordinateSystem: "cartesian2d",
            yAxisIndex: 0,
            stack: config.value.chartStack ? "x" : "",
            symbolSize: (value) => computedSymbolSize(value),
            rippleEffect: { brushType: "stroke" },
            label: staticConfig.labelConfig,
            emphasis: staticConfig.emphasisConfig,
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: commonStore.darkMode
                    ? Colors.ZUYB.ARR.darkColor[0]
                    : Colors.ZUYB.ARR.lightColor[0],
                },
                {
                  offset: 1,
                  color: commonStore.darkMode
                    ? Colors.ZUYB.ARR.darkColor[1]
                    : Colors.ZUYB.ARR.lightColor[1],
                },
              ]),
              opacity: staticConfig.barOpacity,
              ...staticConfig.itemStyle,
            },
            areaStyle: { opacity: 0.8 },
            animationDelay: function (idx) {
              return idx * 50 + 100;
            },
          },
      flowStore.chartConfig.southAirportsChart.type !== "APP" &&
      flowStore.chartConfig.southAirportsChart.type !== "ZULZ"
        ? null
        : {
            name: "ZULZ起飞",
            data: res.data.ZULZ.DEP,
            barMinHeight: staticConfig.barMinHeight,
            type: config.value.chartType,
            smooth: config.value.chartSmooth,

            coordinateSystem: "cartesian2d",
            yAxisIndex: 0,
            stack: config.value.chartStack ? "x" : "",
            symbolSize: (value) => computedSymbolSize(value),
            rippleEffect: { brushType: "stroke" },
            label: staticConfig.labelConfig,
            emphasis: staticConfig.emphasisConfig,
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: commonStore.darkMode
                    ? Colors.ZULZ.DEP.darkColor[0]
                    : Colors.ZULZ.DEP.lightColor[0],
                },
                {
                  offset: 1,
                  color: commonStore.darkMode
                    ? Colors.ZULZ.DEP.darkColor[1]
                    : Colors.ZULZ.DEP.lightColor[1],
                },
              ]),
              opacity: staticConfig.barOpacity,
              ...staticConfig.itemStyle,
            },
            areaStyle: { opacity: 0.8 },
            animationDelay: function (idx) {
              return idx * 50 + 100;
            },
          },
      flowStore.chartConfig.southAirportsChart.type !== "APP" &&
      flowStore.chartConfig.southAirportsChart.type !== "ZULZ"
        ? null
        : {
            name: "ZULZ落地",
            data: res.data.ZULZ.ARR,
            barMinHeight: staticConfig.barMinHeight,
            type: config.value.chartType,
            smooth: config.value.chartSmooth,

            coordinateSystem: "cartesian2d",
            yAxisIndex: 0,
            stack: config.value.chartStack ? "x" : "",
            symbolSize: (value) => computedSymbolSize(value),
            rippleEffect: { brushType: "stroke" },
            label: staticConfig.labelConfig,
            emphasis: staticConfig.emphasisConfig,
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: commonStore.darkMode
                    ? Colors.ZULZ.ARR.darkColor[0]
                    : Colors.ZULZ.ARR.lightColor[0],
                },
                {
                  offset: 1,
                  color: commonStore.darkMode
                    ? Colors.ZULZ.ARR.darkColor[1]
                    : Colors.ZULZ.ARR.lightColor[1],
                },
              ]),
              opacity: staticConfig.barOpacity,
              ...staticConfig.itemStyle,
            },
            areaStyle: { opacity: 0.8 },
            animationDelay: function (idx) {
              return idx * 50 + 100;
            },
          },
      {
        name: "其他",
        data: res.data.OTHER,
        barMinHeight: staticConfig.barMinHeight,
        type: config.value.chartType,
        smooth: config.value.chartSmooth,
        coordinateSystem: "cartesian2d",
        yAxisIndex: 0,
        stack: config.value.chartStack ? "x" : "",
        symbolSize: (value) => computedSymbolSize(value),
        rippleEffect: { brushType: "stroke" },
        label: staticConfig.labelConfig,
        emphasis: staticConfig.emphasisConfig,
        itemStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: commonStore.darkMode
                ? Colors.OTHER.darkColor[0]
                : Colors.OTHER.lightColor[0],
            },
            {
              offset: 1,
              color: commonStore.darkMode
                ? Colors.OTHER.darkColor[1]
                : Colors.OTHER.lightColor[1],
            },
          ]),
          opacity: staticConfig.barOpacity,
          ...staticConfig.itemStyle,
        },
        areaStyle: { opacity: 0.8 },
        animationDelay: function (idx) {
          return idx * 50 + 100;
        },
        // barWidth: config.value.chartSize * 0.8,
        barWidth: 50,
        barGap: 10,
        barCategoryGap: 10,
      },
    ],
    darkMode: commonStore.darkMode,
    animationEasing: "elasticOut",
    animationDelayUpdate: function (idx) {
      return idx * 5;
    },
  };
});

const emits = defineEmits("chartClick");
const handleChartClick = (e) => {
  emits("chartClick", e.dataIndex);
};
</script>
